<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>泉城投票</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/css/vote/unregister/dp.css">
	<script src="/js/admin/jquery.min.js"></script>
	<script src="/js/ichart.latest.min.js"></script>

	<style>
		.con .ichartBox{
		}
		.con .ichartBox .ichartList{
			background-color:#fef9cf;
			flex-direction:column;
			margin:10px;
			border:4px #ffc94e solid;
			border-top-width:6px;
			border-bottom-width:6px;
		}
		.con .ichartBox .ichartList div{
		}
		.con .ichartBox .ichartList .ichart{
			text-align:center;
			width:70%;
			height:100%;
			padding:0 15%;
		}
		.con .ichartBox .ichartList .ichartTitle{
			width:100%;
			font-size:18px;
			font-weight:bold;
			height:30px;
			line-height:30px;
			background-color:#bc0402;
			color:#fefe39;
			text-align:center;
		}
		.column_3{
			width:100% !important;
			padding:0% !important;
			margin:0 auto;
		}
	</style>
</head>
<body>
<div id="main" >
	<h1 class="title">
      <span>

      </span>
	</h1>
	<div class="con">
		<div class="ichartBox">
			<div class="ichartList">
				<div  id="ichart1" class="ichart treeIchart">
				</div>
				<div class="ichartTitle">
				</div>
			</div>
			<div class="ichartList">
				<div  id="ichart2" class="ichart treeIchart">
				</div>
				<div class="ichartTitle">
				</div>
			</div>
			<div class="ichartList">
				<div  id="ichart3" class="ichart treeIchart">
				</div>
				<div class="ichartTitle">
				</div>
			</div>
		</div>
		<div class="ichartBox">
			<div class="ichartList">
				<div  id="ichart4" class="ichart">
				</div>
				<div class="ichartTitle">
				</div>
			</div>
		</div>
	</div>
</div>
<script>
    $(function(){
        var data = {!! $json !!}
        drawHtml(data);

        $('.title').click(function(){
            location.reload();
        })


        var  DrawChartData = [];
        $.each(data.vote_data,function(i,key){
            DrawChartData.push([]);
            console.log(key);
            $.each(key,function(j,key1){
                console.log(key1);
                DrawChartData[i].push({
                    name:key1.title,
                    value:key1.voteNumber,
                    color:data.color[j]
                })
            })

            DrawChart('ichart_'+(i+1),'',DrawChartData[i]);
        })

    })

    function drawHtml(data){
        //处理了1,2,3,4,5,6个数情况,除了2,4 2个一排,其余都是3个一排
        if(data){
            var html = '';
            var len = data.vote_data.length;
            if( len == 5 ){
                html = '<div class="ichartBox">'+
                    '  <div class="ichartList" style="margin-left:18%;">'+
                    '      <div  id="ichart_1" class="ichart column_3"></div>'+
                    '      <div class="ichartTitle">'+data.vote_data[0][0].group_name+'</div>'+
                    '  </div>'+
                    '  <div class="ichartList" style="margin-right:18%;">'+
                    '      <div  id="ichart_2" class="ichart column_3"></div>'+
                    '      <div class="ichartTitle">'+data.vote_data[1][0].group_name+'</div>'+
                    '  </div>'+
                    '</div>'+
                    '<div class="ichartBox">'+
                    '  <div class="ichartList">'+
                    '      <div  id="ichart_3" class="ichart column_3"></div>'+
                    '      <div class="ichartTitle">'+data.vote_data[2][0].group_name+'</div>'+
                    '  </div>'+
                    '  <div class="ichartList">'+
                    '      <div  id="ichart_4" class="ichart column_3"></div>'+
                    '      <div class="ichartTitle">'+data.vote_data[3][0].group_name+'</div>'+
                    '  </div>'+
                    '  <div class="ichartList">'+
                    '      <div  id="ichart_5" class="ichart column_3"></div>'+
                    '      <div class="ichartTitle">'+data.vote_data[4][0].group_name+'</div>'+
                    '  </div>'+
                    '</div>';
            }else{
                $.each(data.vote_data,function(i,key){
                    var j = i+1;
                    if(len == 4){//处理加入div头
                        if(j % 2 === 1 ){
                            html += '<div class="ichartBox">';
                        }
                    }else{
                        if( j % 3 === 1 ){
                            html += '<div class="ichartBox">';
                        }
                    }
                    var className = '';
                    var column_3Data = [3,5,6];
                    if(len == 3 || len ==5 || len == 6){
                        className = 'column_3';
                    }
                    html += '<div class="ichartList">'+
                        '<div  id="ichart_'+j+'" class="ichart '+className+'"></div>'+
                        '<div class="ichartTitle">'+key[0].group_name+'</div>'+
                        '</div>';

                    console.log('len'+len);
                    console.log('j'+j)
                    if(len==5 && j==5){//为5个的时候特殊处理下,免的下面变大2分了
                        html += '<div class="ichartList" style="opacity:0"></div>';
                    }

                    if(len == 1 || len == j){
                        html +=  '</div>'; //结束无论如何加个结束标签
                    }

                    //处理加入div尾
                    if(j>1 && len != j){
                        //处理4个2个1排,其余情况都3个一排
                        if(len == 4){
                            if( j % 2 === 0 ){
                                html += '</div>';
                            }
                        }else{
                            if( j % 3 === 0){
                                html += '</div>';
                            }
                        }
                    }
                })
            }
            $('.con').html(html);
        }

    }



    /**
     * ele必须为ID名,不要#
     * @param  title : 图表title
     * @param  data : 横坐标数据
     */
    function DrawChart(ele,title,data){
        var chart = iChart.create({
            render:ele,
            width:$('#'+ele).width(),
            height:$('#'+ele).width()*0.65,
            background_color:"#fef9cf",
            gradient:false,
            color_factor:0.4,
            animation : true,//开启过渡动画
            animation_duration:800,//800ms完成动画
            animation_timing_function:'easeInOut',
            border:{
                color:"#2996f4",
                width:0
            },
            align:"center",
            offsetx:20,
            offsety:0,
            sub_option:{
                border:{
                    color:"#BCBCBC",
                    width:0
                },
                label:{
                    fontweight:500,
                    fontsize:12,
                    color:"#eea128",
                    sign:"square",
                    sign_size:12,
                    border:{
                        color:"#BCBCBC",
                        width:2
                    },
                    background_color:"#fefefe"
                }
            },
            shadow:true,
            shadow_color:"#666666",
            shadow_blur:7,
            showpercent:true,
            column_width:"35%",
            bar_height:"70%",
            title:{
                text:"",
                color:"#ffffff",
                fontsize:20,
                font:"微软雅黑",
                textAlign:"center",
                background_color:'#941c35',
                height:0,
                offsetx:0,
                offsety:0
            },
            subtitle:{
                text:"",
                color:"#111111",
                fontsize:16,
                font:"微软雅黑",
                textAlign:"center",
                height:20,
                offsetx:0,
                offsety:0
            },
            footnote:{
                text:"",
                color:"#111111",
                fontsize:12,
                font:"微软雅黑",
                textAlign:"right",
                height:20,
                offsetx:0,
                offsety:0
            },
            legend:{
                enable:false,
                background_color:"#1e91f6",
                color:"#1e91f6",
                fontsize:12,
                border:{
                    color:"#1e91f6",
                    width:0
                },
                column:1,
                align:"right",
                valign:"center",
                offsetx:0,
                offsety:0
            },
            coordinate:{
                width:"80%",
                height:"80%",
                background_color:"#fff8d1",
                axis:{
                    color:"#1e91f6",
                    width:["","",2,2]
                },
                grid_color:"#fff8d1",
                label:{
                    fontweight:500,
                    color:"#1e91f6",
                    fontsize:12
                },
                border:{
                    color:"#1e91f6",
                    width:1
                },
            },
            label:{
                fontweight:500,
                color: "#bc0402",
                fontsize:14,
                border:{
                    color:"#1e91f6",
                    width:1
                },
            },
            type:"column2d",
            data:data
        });
        chart.draw();
    }
</script>
</body>
</html>